<template>
  <div class="page">
    <div class="tab_line">
      <ul>
        <li v-for="(item,index) in list" :key="index" @click="changeVal(item.value,index)" :class="{current:pageIndex == index}" href="#"><span>{{item.label}}</span></li>

      </ul>
    </div>
    <div v-if="pageIndex == 0">
      <template v-if="resultList.length">
        <div v-for="(item,index) in resultList" :key="index">
      <div class="weui-cells order"  v-for="(data,i) in item.productInfo" :key="i">
        <a class="weui-cell"   @click="goDetail(item.id)">
          <div class="weui-cell__hd">
            <img class="order_pic" :src="data.showPic" mode="widthFix">
          </div>
          <div class="weui-cell__bd">
            <div class="order_title weui-flex">
              <div class="order_title_left weui-flex__item">{{data.spName}}</div>
              <div class="order_title_right">
                <div class="order_price">￥{{data.xsdj*0.01||0}}</div>
                <div class="order_number">x{{data.qty}}</div>
              </div>
            </div>
           <!-- <div class="order_other">
              <p>总金额：1000.00</p>
              <p>剩余金额：1000.00</p>
              <p>有效期间：2019-03-12</p>
            </div> -->
          </div>
        </a>
        <div class="weui-cell">
          <div class="order_bot">
            <div class="weui-flex">
              <div class="order_bot_left">共{{data.qty}}件商品</div>
              <div class="weui-flex__item order_bot_right">合计：<span>¥{{data.xsdj*0.01*data.qty}}</span></div>
            </div>
            <div class="order_btn" v-if="item.orderStatus==4">
              <a @click="appletAppointOperation(data)" class="btn_default">立即预约</a>
              <a @click="payAlgin(item)" class="btn_primary" >再次购买</a>
            </div>
            <div class="order_btn" v-if="item.orderStatus==0">
                <a @click="pay(item)" class="btn_primary">结算</a>
            </div>
              <div class="order_btn" v-if="item.orderStatus==1">
                 <a @click="getComsumeOrderList(item)" class="btn_default">消耗记录</a>
                <a @click="appletAppointOperation(data)" class="btn_default">立即预约</a>
                <a @click="pay(item)"  class="btn_primary">结算</a>
            </div>
          </div>
        </div>
      </div>
        </div>
     </template>
     <!-- 全部无数据 -->
     <div  v-if="!resultList.length">
        <div class="outData" >
          <span>暂无数据</span>
           </div>
     </div>
    </div>
    <div v-if="pageIndex == 1">
      <template v-if="resultList.length">
        <div v-for="(item,index) in resultList" :key="index">
      <div class="weui-cells order" v-for="(data,i) in resultList.productInfo">
        <div class="weui-cell">
          <div class="weui-cell__hd" @click="goDetail(data.orderId)">
            <img class="order_pic" :src="data.showPic" mode="widthFix">
          </div>
          <div class="weui-cell__bd">
            <div class="order_title weui-flex">
              <div class="order_title_left weui-flex__item">{{data.productName}}</div>
              <div class="order_title_right">
               <div class="order_price">￥{{data.xsdj*0.01||0}}</div>
              <div class="order_number">x{{data.qty}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="order_bot">
            <div class="weui-flex">
              <div class="order_bot_left">共{{data.qty}}件商品</div>
             <div class="weui-flex__item order_bot_right">合计：<span>¥{{item.xsdj*0.01*data.qty}}</span></div>
            </div>
            <div class="order_btn">
              <a @click="pay(item)" class="btn_primary">结算</a>
            </div>
          </div>
        </div>
      </div>
        </div>
      </template>
      <!-- 待付款无数据 -->
      <div  v-if="!resultList.length">
        <div class="outData" >
          <span>暂无数据</span>
           </div>
     </div>
    </div>
    <div v-if="pageIndex == 2">
      <template v-if="resultList.length">
        <div v-for="(item,index) in resultList" :key="index">
          <div class="weui-cells order"  v-for="(data,i) in item.productInfo" :key="i">
<!--      <div class="weui-cells order" v-for="(item,index) in resultList" :key="index">-->
        <div class="weui-cell">
          <div class="weui-cell__hd" @click="goDetail(data.orderId)">
            <img class="order_pic" :src="data.showPic" mode="widthFix">
          </div>
          <div class="weui-cell__bd">
            <div class="order_title weui-flex">
              <div class="order_title_left weui-flex__item">{{data.productName}}</div>
              <div class="order_title_right">
              <div class="order_price">￥{{data.xsdj*0.01||0}}</div>
              <div class="order_number">x{{data.qty}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="order_bot">
            <div class="weui-flex">
               <div class="order_bot_left">共{{data.qty}}件商品</div>
             <div class="weui-flex__item order_bot_right">合计：<span>¥{{data.xsdj*0.01*data.qty}}</span></div>
            </div>
            <div class="order_btn">
              <a @click="getComsumeOrderList(item)" class="btn_default">消耗记录</a>
              <a @click="appletAppointOperation(data)" class="btn_default">立即预约</a>
              <a @click="payAlgin(item)" class="btn_primary" >再次购买</a>
            </div>
          </div>
        </div>
      </div>
        </div>
      </template>
      <!-- 待消耗无数据 -->
       <div  v-if="!resultList.length">
        <div class="outData" >
          <span>暂无数据</span>
           </div>
       </div>
    </div>
    <div v-if="pageIndex == 3">
       <template v-if="resultList.length">
         <div v-for="(item,index) in resultList" :key="index">
      <div class="weui-cells order" v-for="(data,i) in item.productInfo" :key="i">
        <div class="weui-cell">
          <div class="weui-cell__hd" @click="goDetail(data.orderId)">
            <img class="order_pic" :src="data.showPic" mode="widthFix">
          </div>
          <div class="weui-cell__bd">
            <div class="order_title weui-flex">
              <div class="order_title_left weui-flex__item">{{data.productName}}</div>
              <div class="order_title_right">
                 <div class="order_price">￥{{data.lsdj*0.01||0}}</div>
               <div class="order_number">x{{data.qty}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-cell">
          <div class="order_bot">
            <div class="weui-flex">
              <div class="order_bot_left">共{{data.qty}}件商品</div>
             <div class="weui-flex__item order_bot_right">合计：<span>¥{{data.lsdj*0.01*data.qty}}</span></div>
            </div>
            <div class="order_btn">
              <a @click="appletAppointOperation(data)" class="btn_default">立即预约</a>
              <a @click="payAlgin(item)" class="btn_primary" >再次购买</a>
            </div>
          </div>
        </div>
      </div>
         </div>
       </template>
       <!-- 已完结无数据 -->
       <div  v-if="!resultList.length">
        <div class="outData" >
          <span>暂无数据</span>
           </div>
       </div>
    </div>
  </div>
</template>
<script>
  import * as appId from "@/utils/util"
  import {mapGetters} from "vuex"
  import {toDecimal2} from "@/utils/util"
export default {
  data () {
    return {
      current: 0,
      // phone:JSON.parse(wx.getStorageSync('userInfo')).mobileNo,
      pageNo:1,
      pageSize:10,
      result:[],
      totleMoney:0,
      totalCount:0,
      pageIndex:0,
      resultList:[],
      list:[{
        label:"全部",
        value:'all',

      },{
        label:"待付款",
        value:0,

      },{
        label:"待消耗",
         value:2,


      },{
        label:"已完结",
        value:1,

      }]
    }
  },
   onPullDownRefresh(){
     console.log('down')
      if(this.result.length){
     this.pageNo++;
    }
    console.log(this.current)
     this.conmentMethods(this.current)

  },
  onShow(){
    wx.setNavigationBarTitle({
      title: "订单列表"
    })
    this.userInfo =wx.getStorageSync('userInfo')&&JSON.parse(wx.getStorageSync('userInfo'))
   if(this.userInfo) {
     this.phone=this.userInfo.mobileNo;
     this.userId=this.userInfo.baseUserId;
     //this. getList(0)
    this.changeVal('all',0)


   }else{
     wx.showToast({
       title:'请先登录',
       icon: 'none',
       duration: 2000
     })
   }

  },
  methods: {
    ...mapGetters(['user']),
    toDecimal2,
    getComsumeOrderList(item){//消耗记录

        let url=`/pages/consume/main`
         mpvue.navigateTo({ url })
    },
    appletAppointOperation(item){
         wx.setStorageSync('appointData',JSON.stringify(item))
       let url=`/pages/bookingstore/main`
        mpvue.navigateTo({ url })
    },
    pay(item){//结算
       wx.setStorageSync('isTuangou',3)
      let url=`/pages/pay/main?orderId=${item.orderId}&price=${item.amount*0.01}`
       mpvue.navigateTo({ url })
    },
    payAlgin(item){//再次购买
      console.log(item)
       let url="/pages/commit/main";
      wx.setStorageSync('cartData', JSON.stringify(item.productInfo))
        wx.navigateTo({ url })
    },
    goDetail(id){//详情
      const url="/pages/orderdetailproduct/main?id="+id;
       wx.navigateTo({ url })
    },
    changeVal(i,index){
    //  console.log(i)
      this.pageNo=1;
      this.totalCount=0;
      this.totleMoney=0;
      this.resultList=[];

       this.current=i;
       this.pageIndex=index
       this.conmentMethods(this.current)
    },
     conmentMethods(status){//公共方法
        let that=this;
        let {mobileNo}=that.user();
            this.$http.request({
                    method:"post",
                    url:"/v1.0/appletLogin/myOrderList",
                    body:{
                      "phone":this.phone,
                      "appid":appId.appId,
                      "pageNo":that.pageNo,
                      "pageSize":that.pageSize,
                      "status":status,
            }
          }).then((data)=>{

            if(data.code==0){
              that.result=data.result;
               if (that.pageNo > 1) {
              that.resultList.push(...data.result)
                console.log(that.resultList)
              }else{
                that.resultList=data.result;
              }
              that.resultList.forEach((a,i)=>{
                 if(!a.productInfo){
                   a.productInfo=[];
                 }else{
                   a.productInfo.forEach((m,n)=>{
                     m.mid=a.mid;
                     m.productNums=a.productNums;
                     m.amount=a.amount;
                   })
                 }
              })
               if(!data.length){
               wx.stopPullDownRefresh();
            //    wx.showToast({
            //   title: '暂无更多数据',
            //   icon: 'none',
            //   duration: 2000
            // })
            }
            console.log(this.resultList)
            let totleMoney=0,totalCount=0;
            this.resultList.forEach((a,i)=>{
              a.totalCount=0;
              a.detailList.forEach((m,n)=>{
                a.totalCount+=m.qty;

              })
              that.totleMoney+=a.amount
              that.totleMoney=toDecimal2(that.totleMoney)
             // a.totalCount=totalCount
              that.totalCount+=a.totalCount
            })
            }else{
              this.resultList=[];
               wx.showToast({
              title: `${data.message}`,
              icon: 'none',
              duration: 2000
            })
            }
          }).catch((err)=>{
             // this.resultList=[];
            //  wx.showToast({
            //   title: "请求失败",
            //   icon: 'none',
            //   duration: 2000
            // })
          })



    },
    detail () {
      console.log('1')
      const url = '../orderdetail/main'
      mpvue.navigateTo({ url })
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.outData{
  width:100%;text-align:center;font-size:0.8em;margin-top: 0.8em;
}
.tab_line ul{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.tab_line ul li{
  height: 2.4em;
  line-height: 2.4em;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  text-align: center;
  color: #666;
  font-size: 0.8em;
  background: #fff;
}
.tab_line ul li span{
  display: inline-block;
  height: 2.4em;
}
.tab_line ul li.current span{
  border-bottom: 1px #FF787E solid;
  color: #FF787E;
}
.order .order_pic{
  width: 5em;
  height: 5em;
  margin-right: 0.6em;
  border-radius: 0.3em;
  margin-top: 0.2em;
}
.order .weui-cell:before{
  display: none;
}
.order .weui-cell{
  -webkit-box-align: inherit;
  -webkit-align-items: inherit;
  align-items: inherit;
}
.order .weui-cell:last-child{
  padding-top: 0.2em;
}
.order_title .order_title_left{
  font-size: 0.9em;
}
.order_title_right{
  font-size: 0.8em;
  text-align: right;
  color: #999;
  margin-left: 0.4em;
}
.order_title_right .order_price{
  color: #FF787E;
}
.order_other{
  font-size: 0.8em;
  color: #666;
  margin-top: 0.3em;
}
.order_bot{
  width: 100%;
}
.order_bot .order_bot_left{
  color: #999;
  font-size: 0.8em;
  width: 6em;
}
.order_bot .order_bot_right{
  color: #333;
  font-size: 0.9em;
  text-align: right;
}
.order_bot .order_bot_right span{
  color: #FF787E;
}
.order_bot .order_btn{
  text-align: right;
  padding-top: 0.3em;
}
.order_bot .order_btn a{
  width: 6em;
  height: 1.8em;
  line-height: 1.8em;
  text-align: center;
  display: inline-block;
  border-radius: 0.9em;
  font-size: 0.8em;
  margin-left: 0.2em;
}
.order_bot .order_btn .btn_default{
  color: #666;
  border: 1px #999 solid;
}
.order_bot .order_btn .btn_primary{
  color: #FF787E;
  border: 1px #FF787E solid;
}
</style>
